<template>
  <div class="home-bg padding-20">
    <div class="flex justify-between border-b-line padding-bottom-10 margin-bottom-15" style="width: 100%">
      <div class="font-size-18 font-weight-700">全年现金流</div>
      <span>单位：万元</span>
    </div>

    <div class="flex justify-between margin-bottom-15">
      <div class="bg-white padding-15 shadow-box flex-1 cursor-pointer margin-right-15" @click="goInfo('income', 'operate')">
        <progress-cash :model="staticIncomeModel" ref="progressIn" title="本年现金流入" :isIncome="true"></progress-cash>
      </div>
      <div class="bg-white padding-15 shadow-box flex-1 cursor-pointer" @click="goInfo('pay', 'operate')">
        <progress-cash :model="staticPayModel" ref="progressPut" title="本年现金流支出" :isIncome="false"></progress-cash>
      </div>
    </div>

    <div class="flex justify-between">
      <div class="bg-white padding-15 shadow-box flex-1 cursor-pointer">
        <div @click="goInfo('income', 'operate')">
          <bar-statistic res="barStatistic1" :model="incomeModel" title="全年现金流入预测" :isIncome="true"></bar-statistic>
        </div>
        <div class="flex margin-top-10">
          <div class="flex-1" @click="goInfo('income', 'operate')">
            <compare-last-year-item title="经营活动现金流入预测" :model="incomeModel.itemDtos[0]" :normType="1" class="padding-10 margin-right-5 flex-1 bg-color-f8f8f8"></compare-last-year-item>
          </div>
          <div class="flex-1" @click="goInfo('income', 'noOperate')">
            <compare-last-year-item title="非经营活动现金流入预测" :model="incomeModel.itemDtos[1]" :normType="1" class="padding-10 margin-left-5 flex-1 bg-color-f8f8f8"></compare-last-year-item>
          </div>
        </div>
      </div>
      <div class="bg-white padding-15 shadow-box flex-1 margin-left-right-15 cursor-pointer">
        <div @click="goInfo('pay', 'operate')">
          <bar-statistic res="barStatistic2" :model="payModel" title="全年现金流支出预测" :isIncome="false"></bar-statistic>
        </div>
        <div class="flex margin-top-10">
          <div class="flex-1" @click="goInfo('pay', 'operate')">
            <compare-last-year-item title="经营活动支出预测" :model="payModel.itemDtos[0]" :normType="2" class="padding-10 margin-right-5 flex-1 bg-color-f8f8f8"></compare-last-year-item>
          </div>
          <div class="flex-1" @click="goInfo('pay', 'noOperate')">
            <compare-last-year-item title="非经营活动支出预测" :model="payModel.itemDtos[1]" :normType="2" class="padding-10 margin-left-5 flex-1 bg-color-f8f8f8"></compare-last-year-item>
          </div>
        </div>
      </div>
      <div class="bg-white padding-15 shadow-box flex-1 cursor-pointer">
        <div @click="goInfo('income', 'operate')">
          <bar-statistic res="barStatistic3" :model="netModel" title="全年净现金流预测" :isIncome="true"></bar-statistic>
        </div>
        <div class="flex margin-top-10">
          <div class="flex-1" @click="goInfo('income', 'operate')">
            <compare-last-year-item title="经营活动净现金流预测" :model="netModel.itemDtos[0]" :normType="1" class="padding-10 margin-right-5 flex-1 bg-color-f8f8f8"></compare-last-year-item>
          </div>
          <div class="flex-1" @click="goInfo('income', 'noOperate')">
            <compare-last-year-item title="非经营活动净现金流预测" :model="netModel.itemDtos[1]" :normType="1" class="padding-10 margin-left-5 flex-1 bg-color-f8f8f8"></compare-last-year-item>
          </div>
        </div>
      </div>
    </div>
<!--    <div class="font-size-18 font-weight-700 padding-bottom-10 margin-top-bottom-15 border-b-line">全年利润</div>-->
<!--    <div class="flex justify-between">-->
<!--      <div class="bg-white padding-15 flex-1 shadow-box" @click="goInfo('profit')">-->
<!--        <bar-statistic res="barStatistic4" title="全年权责收入预测" :model="profitModel.incomeForecast" :isIncome="true"></bar-statistic>-->
<!--      </div>-->
<!--      <div class="bg-white padding-15 flex-1 shadow-box margin-left-right-15" @click="goInfo('profit')">-->
<!--        <bar-statistic res="barStatistic5" title="全年权责支出预测" :model="profitModel.expendForecast" :isIncome="false"></bar-statistic>-->
<!--      </div>-->
<!--      <div class="bg-white padding-15 flex-1 shadow-box" @click="goInfo('profit')">-->
<!--        <bar-statistic res="barStatistic6" title="全年净利润预测" :model="profitModel.netProfitForecast" :isIncome="true"></bar-statistic>-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>
<script>
  import dayjs from 'dayjs';
  import { apiPlanIncomeCash, apiForecastCashFlow, apiPlanHomeYearProfit, apiPlanCashStatistics } from '@a/about';
  import compareLastYearItem from './compareLastYearItem.vue';
  import barStatistic from './barStatistic.vue';
  import progressCash from './progressCash.vue';

  export default {
    props: {
      // group: 集团计划 project: 项目计划
      pageType: {
        type: String,
        default: '',
      },
    },

    data() {
      return {
        profitModel: { incomeForecast: {}, expendForecast: {}, netProfitForecast: {} },
        incomeModel: { itemDtos: [{}, {}] },
        payModel: { itemDtos: [{}, {}] },
        netModel: { itemDtos: [{}, {}] },
        staticIncomeModel: {},
        staticPayModel: {},
      };
    },

    methods: {
      async getInfo() {
        let params = {
          year: this.$route.query.year,
        };
        if (this.pageType == 'project') {
          params.projectKeys = [this.$route.query.projectKey];
        }

        // 项目计划/执行 审批状态参数
        if (this.$route.query.processWorkId && this.pageType == 'project') {
          params.ifSearchDraft = 1
          params.source = 'year'
        }

        let res = await apiForecastCashFlow(params);

        this.incomeModel = res.rows.find(item => item.cashFlowBizType == 'inflow');
        this.payModel = res.rows.find(item => item.cashFlowBizType == 'outflow');
        this.netModel = res.rows.find(item => item.cashFlowBizType == 'netflow');
      },

      async getPlanHomeYearProfit() {
        let params = {
          year: this.$route.query.year,
        };
        if (this.pageType == 'project') {
          params.projectKeys = [this.$route.query.projectKey];
        }
        let res = await apiPlanHomeYearProfit(params);
        //按照下标依次是 全年收入 上一年执行 偏差 偏差%
        let sourceFiledList = ['totalPlantPrice', 'totalLastPlantPrice', 'totalPlantDeviation', 'totalPlantDeviationPrice'];
        let targetList = ['planAmountTotal', 'lastExecutionTotal', 'deviationAmount', 'deviationRate'];
        sourceFiledList.forEach((item, index) => {
          res.incomeForecast[item] = res.incomeForecast[targetList[index]];
          res.expendForecast[item] = res.expendForecast[targetList[index]];
          res.netProfitForecast[item] = res.netProfitForecast[targetList[index]];
        });

        this.turnField(res.incomeForecast);
        this.turnField(res.expendForecast);
        this.turnField(res.netProfitForecast);

        this.profitModel = res;
      },

      turnField(res) {
        res.monthAmountList.forEach(item => {
          item.monthPlantPrice = item.amount;
        });
        res.monthCashFlowList = res.monthAmountList;
      },

      async getPlanCashStatistics () {
        let params = {
          year: this.$route.query.year,
        };
        if (this.pageType == 'project') {
          params.projectKeys = [this.$route.query.projectKey];
        }

        // 项目计划/执行 审批状态参数
        if (this.$route.query.processWorkId && this.pageType == 'project') {
          params.ifSearchDraft = 1
          params.source = 'year'
        }

        let res = await apiPlanCashStatistics(params)
        this.staticIncomeModel = res.rows.find(item => item.statisticsType == 1)
        this.staticPayModel = res.rows.find(item => item.statisticsType == 2)

      },

      //去详情页
      goInfo(type, manage) {
        let groupList = ['groupyearIncome', 'groupyearPay', 'groupyearProfit'];
        let projectList = ['compileIncome', 'compilePay', 'compileProfit'];
        let targetList = this.pageType == 'group' ? groupList : projectList;
        let pathName = '';
        if (type == 'income') {
          pathName = '/businessPlan/businessManage/' + targetList[0];
        } else if (type == 'pay') {
          pathName = '/businessPlan/businessManage/' + targetList[1];
        } else if (type == 'profit') {
          pathName = '/businessPlan/businessManage/' + targetList[2];
        }

        let queryData = location.search.split('?')[1].split('&')

        let isManage = false
        queryData = queryData.map(item => {
          let arr = item.split('=')
          if (arr[0] == 'manage') {
            arr[1] = manage
            isManage = true
          }

          return arr[1] && arr[1] !== 0 ? arr.join('=') : ''
        })

        if (!isManage) {
          queryData.push('manage=' + manage)
        }

        window.location.href = pathName + '?' + queryData.filter(item => {return !!item}).join('&');
      },
    },

    mounted() {
      this.getInfo();
      this.getPlanHomeYearProfit();
      this.getPlanCashStatistics();
    },

    components: {
      compareLastYearItem,
      barStatistic,
      progressCash
    },
  };
</script>

<style lang="scss" scoped>
  .shadow-box:hover {
    box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.1);
  }
</style>
